<template>
	<view>	
		<uni-nav-bar  fixed="true" title="砍价" left-icon="back"  :status-bar="true" :border="false" class="NavBar"  @clickLeft="NavBar()">
		</uni-nav-bar>
		<!-- <view class="MyBargain" @click="MyBargain()">我的砍价</view> -->
		<view class="banner" v-if="Banner.length" style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;border-radius: 15upx;width: 710upx;margin: 0 auto;">
			<swiper  class="swiper1" :circular="true" :indicator-dots="false" autoplay="true"  interval="2000" duration="500"	>					
				<swiper-item v-for="(item,index) in Banner" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>	
			</swiper>	
		</view>	
		
		<view class="top">
			<view @click="sortType(0)" :class="comprehensive == 1 ? 'fe0000':''">综合排序</view>
			
			<view @click="sortType(1,0)" v-if="Sales==0">
				<text>销量</text>
				<image class="sjx" src="../../static/images/sjx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1,1)" v-if="Sales==1">
				<text class="fe0000">销量</text>
				<image class="sjx" src="../../static/images/sjx_sx.jpg" mode=""></image>				
			</view>
			<view @click="sortType(1,2)" v-if="Sales==2">
				<text class="fe0000">销量</text>
				<image class="sjx" src="../../static/images/sjx_jx.png" mode=""></image>				
			</view>
			
			
			<view @click="sortType(2,0)" v-if="Price==0">
				<text>价格</text>
				<image class="sjx" src="../../static/images/sjx.jpg" mode=""></image>									
			</view>
			<view @click="sortType(2,1)" v-if="Price==1">
				<text  class="fe0000">价格</text>
				<image class="sjx" src="../../static/images/sjx_sx.jpg" mode=""></image>					
			</view>
			<view @click="sortType(2,2)" v-if="Price==2">
				<text  class="fe0000">价格</text>
				<image class="sjx" src="../../static/images/sjx_jx.png" mode=""></image>					
			</view>
			<view  @click="flag=true;flag2=false;sai=2;">筛选</view>
		</view>
		
		<view class="lis">
			<view class="liBox" v-for="(item,index) in ListInfo" :key="index" @click="Toxq(item.goods_id,item.id)">
				<image :src="item.goods_image" mode=""></image>
				<view class="djs">
					<text class="" >
						{{TimeList[index]||""}}
						<!-- limitFormatTime(item.end_date) TimeList -->
					</text>			
				</view>
				<view class="twoline fs20 lh35">
					{{item.bargain_goods_name}}<!-- {{item.end_date |formaDate('yyyy-mm-dd')}} -->
				</view>
				<view class="">
					<view class="fl">
						<text class="fs20 C666">价格：</text>
						<text class="Cfe0000 fs22">{{item.goods_price}}</text>
					</view>
					<view class="qukanjia fr Cfff" >
						去砍价
					</view>
				</view>
			</view>
		
		</view>
		
		<view  class="sxMask" v-if="flag" @click="Close()">
			<view class="innerMask" @click.stop="zhuzhi()">
				<view class="innerMaskTop flex_align flex">
					<view>筛选</view>
					<image src="@/static/images/sx.png" class="sxImage"></image>
				</view>
				
				
				<scroll-view class="scrollX" scroll-y="true" >
				<view class="innerMaskCenter">
					<view class="innerMaskCenterT flex_bettween flex">
						<text class="fl fs18 bold">品牌</text>
						<view class="fr fs18 C999 flex_align flex" >
							<view class="fs18 C999" @click="Allpinpai()">全部</view>
							<image class="xj" src="@/static/images/down.png"></image>
						</view>
						
					</view>
					<view class="pplis" :class="{'show':pinpai}">
						<text class="ppli" :class="{xuanze:filter1==index+1}" v-for="(item,index) in pinpaiList" :key='index' @click="brand(index,item.brand_id)">{{item.brand_name}}</text>
					</view>
					
					<view class="innerMaskCenterT mt flex_bettween">
						<text class="fl fs18 bold">商品分类</text>
						<view class="fr fs18 C999 flex_align flex">
							<view class="fs18 C999" @click="AllClass()">全部</view>
							<image class="xj" src="@/static/images/down.png"></image>
						</view>
					</view>
					<view class="ppfllis" :class="{'show':pinpai}">
						<text class="ppli" :class="{xuanze:filter2==index+1}" v-for="(item,index) in fenleiList" :key='index' @click="recommend_class(index,item.gc_id)">{{item.gc_name}}</text>				
					</view>
					
				</view>
					</scroll-view>
				
				
				<view class="innerMaskBottom">
					<button class="fl innerMaskBottom1" @click="chongzhi()">重置</button>
					<button class="fr innerMaskBottom2" @click="innerMask()">确定</button>
				</view>
			</view>
		</view>
		
		
		<view v-if="ListInfo.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				indicatorDots:false,
				circular:true,
				active1:0,
				active2:2,
				flag:false,
				Sales:0,
				Price:0,
				comprehensive:false,
				Repurchase:false,//控制筛选
				pinpaiList:[],
				fenleiList:[],
				ListInfo: [],
				UserInfo:[],
				filter1:0,
				brand_id:"",
				filter2:0,
				gc_id:"",
				curpage:1,
				store_id:32,//店铺id
				repur_id:1,//活动id
				ChangeList:"",
				num:"aaa",
				shi:0,
				fen:0,
				miao:0,
				allMiao:0,
				pinpai:false,
				aClass:false,
				TimeList:[],
				Banner:"",
				Time:"",
				order_key:"",
				order_type:""
			}
		},
		
		created() {
			this.getClass();
			this.getbrand();
			this.getBanner();
		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			console.log(this.curpage)
			if(this.curpage){
				this.getList("","",true)
			}else{
				uni.showToast({
					title:'已是最后一页！',
					icon:'none'
				})
			}
		},
		onHide() {
			clearInterval(this.Time);
		},
		methods: {
			getBanner(){//获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=kanjiaAdvList',
					method: 'get',
					data: {},
				}).then((res)=> {
					this.Banner=res.datas.adv_list;
				})
			},
			NavBar(){
				uni.navigateBack({
					delta:1
				})
			},
			MyBargain(){
				uni.navigateTo({
					url:"Mybargain"
				})
			},
			innerMask(){
				this.flag=false;
				this.getList();
			},
				
			Allpinpai(){
				this.pinpai=!this.pinpai;
			},
			AllClass(){
				this.aClass=!this.aClass;
			},
			chongzhi(){
				this.filter1=0;
				this.filter2=0;
				this.brand_id="";
				this.gc_id="";
			},
			Toxq(goods_id,Bargain_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id+"&Bargain_id="+Bargain_id
				})
			},
				getbrand(){//获取品牌列表
					let that = this;
						this.$util.request({
							url: '/mobile/index.php?act=brand&op=index',
							method: 'get',
							data: {},
						}).then(function(res) {
							that.pinpaiList=res.datas
							console.log(res)
						})
				},
				getClass(){//获取分类列表
					var that=this		
					this.$util.request({
						url: '/mobile/index.php?act=index&op=recommend_class',
						method: 'get',
						data: {},
					}).then(function(res) {
						that.fenleiList=res.datas.list
					})
				},
				Close(){
					this.flag=false;
				},
				brand(index,brand_id){
					this.filter1=index+1;
					this.brand_id=brand_id;
				},
				recommend_class(index,gc_id){
	
					this.filter2=index+1
					this.gc_id=gc_id;
				},
				getList(order_key="",order_type="",stat){//获取列表信息
					let that = this;
						this.$util.request({
							url: '/mobile/index.php?act=bargain&op=index',
							method: 'get',
							data: {order_key:that.order_key,order_type:that.order_type,curpage:that.curpage,gc_id:that.gc_id,b_id:that.brand_id},
						}).then(function(res) {
							console.log(res)
							that.UserInfo=res.datas.repur_info;
							// that.ListInfo=res.datas.goods_list;
							if(stat){
								that.ListInfo=that.ListInfo.concat(res.datas.bargain) ;
							}else{
								that.ListInfo=res.datas.bargain;
							}
							console.log(that.ListInfo.length)
							if(that.ListInfo.length>0){
								for(let i=0;i<that.ListInfo.length;i++){
									that.limitFormatTime(that.ListInfo[i].end_date,i)
								}
							}
							
							
							that.curpage++;
							if(that.curpage>=res.datas.paged.page_total){
								that.curpage=false;
							}
						})
					},
				sortType(index,state){
					let that=this;
					that.brand_id="";
					that.gc_id="";
					that.curpage=1;
					if(index==0){
						that.comprehensive = true;
						that.Sales=0;
						that.Price=0;
						that.order_key="0";
						that.order_type="0";
						that.getList();
					}
					if(index==1){//销量删选
						that.comprehensive = false;
						that.Price=0;
						if(state==0){
							that.Sales=1;
							that.order_key="1";
							that.order_type="0";
							that.getList(1,0);
						}else if(state==1){
							that.Sales=2;
							that.order_key="1";
							that.order_type="1";
							that.getList(1,1);
						}else if(state==2){
							that.Sales=1;
							that.order_key="1";
							that.order_type="0";
							that.getList(1,0);
						}
					}
					if(index==2){//价格删选
						that.comprehensive = false;
						that.Sales=0;
						if(state==0){
							that.Price=1;
							that.order_key="2";
							that.order_type="0";
							that.getList(2,0);
						}else if(state==1){
							that.Price=2;
							that.order_key="2";
							that.order_type="1";
							that.getList(2,1);
						}else if(state==2){
							that.Price=1;
							that.order_key="2";
							that.order_type="0";
							that.getList(2,0);
						}
					}	
					clearInterval(that.timer)
				},
				limitFormatTime(date,i) {
					var that=this;
					// console.log(date,"date")
					 this.Time=setInterval(()=>{
					var nowstr = (new Date());
					nowstr= parseInt(nowstr.valueOf()/1000)
					var chazhi = (date - nowstr);
					if (chazhi < 0) {
					    chazhi = 0;
						clearInterval(this.Time);
						that.TimeList.splice(i,1,"<text>已经结束</text>")
						// return "<text>已经结束</text>"
					}
					// var d = parseInt(chazhi / 3600 / 24);
					var h = parseInt((chazhi / 3600) );//% 24
					var m = parseInt((chazhi % 3600) / 60);
					var s = parseInt((chazhi % 3600) % 60);
					h=h<10 ? "0" + h:h;
					m=m<10 ? "0" + m:m;
					s=s<10 ? "0" + s:s;
					that.TimeList.splice(i,1,'距离结束:'+ h+':'+m+':'+s)
					// #ifdef MP-WEIXIN
						// that.setData({'距离结束:<text  class="fs12 Cfff djsBox">'+ h+'</text  class="fs12 Cfff djsBox">:<text>'+m+'</text>:<text  class="fs12 Cfff djsBox">'+s+'</text>'})
					// #endif
				 },1000)
				 
				},
				zhuzhi(){}//阻止事件冒泡

			}
		}

</script>

<style>
	.MyBargain{
		line-height: 60rpx;
		text-align: center;
		background-color: #ff4300;
		color: #FFF9FC;
	}
	page{
		background-color: #F8F8F8;
	}
	.xuanze{
		background-color: #ff4300 !important;
		color: #FFFEFF !important;
	}
	.scrollX{
		height: 1000rpx;
	}
	.pplis,.ppfllis{
		height: 130rpx;
		overflow: hidden;
	}
	.show{
		height: auto !important;
		overflow: overlay !important;
	}
	view{
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	.lh20{
		line-height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.lh35{
		line-height: 35upx;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
		align-items: center;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc3255f{
		color: #c3255f;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	uni-page-body {
		background-color: #F8F8F8;
		color: rgb(102, 102, 102);
	}
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24rpx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.topTitle{
		background-color: #FFFFFF;
		/* padding-top: 40upx; */
		padding-top: 60upx;
		padding-left: 20upx;
		padding-right: 20upx;
		padding-bottom: 27upx;
		border-bottom:1px solid #f2efef;
		border-radius: 15upx;
	}
	.input{
		box-sizing: border-box;
		height: 77upx;
		padding: 13upx 30upx 0 20upx;
	}
	.input .input1{
		box-sizing: border-box;
		width: 618upx;
		height: 50upx;
		background-color: ;
		border-radius: 10upx;
		background: url(../static/images/kj_search.jpg) 20upx center no-repeat,#efeff4;
		background-size: 40upx 30upx;
		padding-left: 80upx;  
	}
	.top{
		box-sizing: border-box;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32upx;
	}
	.top>view{
		height: 80upx;
		line-height: 80upx;
		/* font-size: 21upx; */
		font-size:30upx;
	}
	.top image{
		width: 35upx;
		height: 35upx;
	}
	.fe0000{
		color: #ff4300;
	}
	.active11{
		color: #ff4300;
	}
	.sjx{
		position: relative;
		top: 8upx;
		width: 30upx;
		height: 30upx;
	}
	.lis{
		padding: 0 20upx;
		background-color: #F8F8F8;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.lis .liBox{
		box-sizing: border-box;
		/* text-align: center; */
		margin-top: 20upx;
		background-color: #fff;
		width: 348upx;
		height: 487upx;
		border-radius: 10upx;
		padding:12upx 12upx;
	}
	.lis .liBox image{
		width: 326upx;
		height: 280upx;
	}
	.djs{
		background-color: #ff4300;
		height: 40upx;
		line-height: 40upx;
		position: relative;
		top: -20upx;
		color: #FFFFFF;
		text-align: center;
	}
	.qukanjia{
		position: relative;
		top: 14upx;
		width: 90upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		color: #FFFFFF;
		background-color: #ff4300;
	}
	.djsBox{
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		background-color: #000000;
		border-radius: 4upx;
		padding:2upx 5upx;
		position: relative;
		top: -2upx;
	}
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.sxImage{
		width: 30upx;height: 30upx;margin-left: 15upx;
	}
	.arrImage{
		width: 36upx;height: 15upx;margin-left: 5upx;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.bold{
		font-weight: bold;
	}
	.C999{
		color: #999999;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.fs18{
		font-size: 24upx;
	}
	.fs21{
		font-size: 26upx
	}
	.pplis{
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin: 8upx 10upx;
		padding: 5upx 0upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
		min-width: 29%;
		text-align: center;
		align-items: center;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 40upx;
		font-size: 22upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		margin-left: 8rpx;
		width: 24upx;
		height: 14upx;
	}
	.mt{
		margin-top: 20upx;
	}
</style>
